<template>
  <div class="counterfraud">
    <div class="searchBox">
      <div class="navBoxLeft">
        <!-- <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" style="margin-right: 20px;width: 250px;" value-format="yyyy-MM-dd">
                </el-date-picker> -->
        <el-input
          placeholder="请输入姓名或手机号进行搜索"
          clearable
          suffix-icon="el-icon-search"
          v-model="keyword"
          style="margin-right: 20px; width: 250px"
        >
        </el-input>

        <el-select
          v-model="status"
          clearable
          placeholder="出警状态"
          style="margin-right: 20px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- <el-button>导出</el-button> -->
        <el-button>重置</el-button>
        <el-button type="primary" style="margin-right: 20px" @click="postData"
          >搜索</el-button
        >
      </div>
      <div class="navBoxRight">
        <el-button type="primary" @click="addClick('add', {})">新增</el-button>
      </div>
    </div>

    <div class="tableBoxCard" :style="{ height: Height2 + 'px' }">
      <el-table
        :data="tableData"
        stripe
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        style="width: 100%"
        :height="Height"
        :max-height="Height"
        v-loading="loading"
      >
        <el-table-column label="序号" width="50">
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="80"> </el-table-column>
        <el-table-column prop="phone" label="联系方式" width="120">
        </el-table-column>
        <el-table-column prop="status" label="最新出警状态" width="120">
          <template slot-scope="scope">
            <div @click="infoClick(scope.row.id)" style="cursor: pointer">
              <p
                v-if="scope.row.status == '' || scope.row.status == 0"
                style="color: rgb(215, 25, 41)"
              >
                待劝阻
              </p>
              <p v-if="scope.row.status == 1" style="color: rgb(215, 25, 41)">
                劝阻中
              </p>
              <p v-if="scope.row.status == 2" style="color: rgb(40, 160, 95)">
                已完成
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="warnCount" label="下次预警次数" width="120">
        </el-table-column>
        <el-table-column prop="moneyCount" label="资金端预警次数" width="120">
        </el-table-column>
        <el-table-column
          prop="lastMoney"
          label="最后一次资金端金额(元)"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="最后一次资金端日期"
          width="200"
        >
        </el-table-column>
        <el-table-column prop="remarks" label="备注"> </el-table-column>
        <el-table-column prop="address" label="操作" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="addClick('edit', scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="deleteClick(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          align="center"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <add ref="addView" @addEmit="postData" :tableData="tableData"></add>
    <info ref="infoView"></info>
  </div>
</template>
<script>
import { findPage, deleteApi } from "@/api/counterfraud";
import add from "./components/add";
import info from "./components/info";
export default {
  components: {
    add,
    info,
  },
  name: "counterfraud",
  data() {
    return {
      Height: window.innerHeight - 220,
      Height2: window.innerHeight - 150,
      total: 0,
      page: 1,
      pageSize: 10,
      time: "", //时间
      keyword: "",
      options: [
        {
          value: "0",
          label: "待劝阻",
        },
        {
          value: "1",
          label: "劝阻中",
        },
        {
          value: "2",
          label: "已完成",
        },
      ],
      status: "",
      tableData: [],
      loading: false,
    };
  },
  mounted() {
    this.postData();
  },
  methods: {
    addClick(type, info) {
      this.$refs.addView.init(type, info);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.postData();
    },
    postData() {
      this.loading = true;
      findPage({
        keyword: this.keyword,
        page: this.page,
        size: this.pageSize,
        status: this.status,
      })
        .then((res) => {
          this.loading = false;
          this.tableData = res.data.content;
          this.total = res.data.totalElements;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    deleteClick(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const formData = new FormData();
        formData.append("ids", id);
        deleteApi(formData).then((res) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.postData();
        });
      });
    },
    infoClick(id) {
      this.$refs.infoView.init(id);
    },
  },
};
</script>
<style lang="scss" scoped>
.counterfraud {
  box-sizing: border-box;
  padding: 15px;

  .navBoxLeft {
    display: flex;
  }

  .searchBox {
    width: 100%;
    height: 60px;
    background: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20px;
    justify-content: space-between;
  }

  .tableBoxCard {
    width: 100%;
    background: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 20px;
    margin-top: 10px;

    .pagination {
      margin-top: 10px;
      align-items: center;
    }
  }
}

.tableBoxCard ::v-deep .el-table th,
.el-table tr {
  background: #fafafa;
}
.counterfraud ::v-deep .el-dialog {
  margin-top: 5vh !important;
}
</style>
